<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script setup>
import axios from 'axios'

const route = useRoute()
const initMap = () => {
  let item = ''
  let listd = ''
  if (route.query.id == 1) {
    item = 22.772978;
    listd = 113.858235;
  } else if (route.query.id == 2) {
    item = 22.796511
    listd = 113.874186
  } else if (route.query.id == 3) {
    item = 22.806704
    listd = 113.86371
  } else if (route.query.id == 4) {
    item = 22.773077
    listd = 113.852176
  } else if (route.query.id == 5) {
    item = 22.78131
    listd = 113.840965
  } else if (route.query.id == 6) {
    item = 22.798012
    listd = 113.843161
  }
  //定义地图中心点坐标
  var center = new TMap.LatLng(item, listd)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(document.getElementById('container'), {
    center: center,//设置地图中心点坐标
    zoom: 17.2,   //设置地图缩放级别
  });
  new TMap.MultiMarker({
    map: map,  //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      "myStyle": new TMap.MarkerStyle({
        "width": 25,  // 点标记样式宽度（像素）
        "height": 35, // 点标记样式高度（像素）
        "src": '../../assets/dingwei.png',  //图片路径
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        "anchor": { x: 16, y: 32 }
      })
    },
    //点标记数据数组
    geometries: [{
      "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      "styleId": 'myStyle',  //指定样式id
      "position": new TMap.LatLng(item, listd),  //点标记坐标位置
      "properties": {//自定义属性
        "title": "marker"
      }
    },
    ]
  });
}
const loadScript = () => {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://map.qq.com/api/gljs?v=1.exp&key=S6GBZ-XLILN-WOEFJ-SJOUJ-3OND6-LKBRH&callback=initMap";
  document.body.appendChild(script);
  initMap()
}
// const zdqyeng = () => {


// let url=' https://baoanqifu.tgovcloud.com/govcloud/qqzqcloud/balocal-h5-api/dev-api/contact/verifyZdEnterprise'
//   axios.get(url, 
//     {
//         headers: {
//             'Appid': 'afc903d9d5e449488a3cf9a00c3d1294',
//             "Appkey" :'8cb4f61b-e89a-405b-acc8-4d992826c247',   
//         },
//        params:{
//         tyshxydm:'91440300MA5D8LJU52'
//        } 
//     }
// )
// .then(res => {
//   console.log(res);
// })
// }
onMounted(() => {
  loadScript()
})
</script>
<style lang="scss" scoped>
#container {
  border-radius: 5px;
  margin: 1rem 0;
  overflow: hidden;
  position: relative;
  height: 10rem;
  width: 100%;

  :deep().rotate-circle {
    display: none !important;
  }

  :deep() .tmap-zoom-control {
    display: none !important;
  }

  :deep().logo-text {
    display: none !important;
  }

  :deep().tmap-scale-text {
    // display: none !important;
  }

  :deep() a {
    position: absolute;
    bottom: 0;
    right: -190%;
  }

  :deep().tmap-scale-line {
    border-color: #000 !important;
  }
}
</style>